<template>
    <view class="mPayCode">
        <view class="mPayCode-item">
            <view class="item-top">
                <view class="top_text"> 付给{{ merDataList.shopname }} </view>
                <view class="to_image">
                    <image :src="imgUrl + merDataList.avatar" mode="scaleToFill" />
                </view>
            </view>
            <view class="item-center">
                <view class="center_text">金额</view>
                <view style="margin-bottom: 20rpx">
                    <input type="text" v-model="dataList.money" placeholder="付款金额" style="font-size: 40rpx" />
                </view>
                <!-- <view class="center_price">¥ 95</view> -->
            </view>
            <view class="bottom">
                <text class="bottom_text">备注</text>
                <input placeholder="请输入备注" v-model="dataList.remark" style="text-align: right" />
            </view>
            <view class="item-btn" @click="PayMoney()"> 支付 </view>
        </view>
    </view>
</template>
<script>
export default {
    name: "mPayCode",
    mixins: [],
    props: {},
    data() {
        return {
            imgUrl: this.$imgUrl,

            merDataList: {},
            dataList: {
                money: "",
                shop_id: 1,
                remark: "",
            },
        };
    },
    computed: {},
    watch: {},
    mounted() {},
    onLoad(options) {
        uni.request({
            url: "/increased.index/GetShopDetails",
            method: "POST",
            // data: { code: "shop:1" },
            data: { code: options.merData },
            success: (res) => {
                this.merDataList = res.res.data;
                this.dataList.shop_id = this.merDataList.id;
                // uni.navigateTo({ url: "/pages/user/mPayCode?merData=" + JSON.stringify(res.res) });
            },
        });
    },
    methods: {
        PayMoney() {
            uni.request({
                url: "/increased.index/AddOrder",
                method: "POST",
                data: this.dataList,
                success: (res) => {
                    console.log(res, "扫码结果商户");
                    // uni.showToast({
                    //     title: res.msg,
                    //     icon: 'none',
                    //     duration: 1000
                    // });
                    this.$wanlshop.to(
                        `/pages/user/money/pay?token=${res.data.token}&data=${JSON.stringify(
                            res.data.list
                        )}&order_type=offline`
                    );
                },
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.mPayCode {
    width: 100vw;
    min-height: 100vh;
    background-color: #f0f3f8;

    .mPayCode-item {
        .item-top {
            width: 100%;
            padding: 0 60rpx;
            height: 160rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #efefef;

            .top_text {
                font-size: 30rpx;
                font-weight: bold;
            }

            .to_image {
                width: 100rpx;
                height: 100rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .item-center {
            background-color: #fff;
            border-radius: 20rpx;
            padding: 20rpx;

            .center_text {
                font-size: 32rpx;
                font-weight: 500;
                height: 70rpx;
                line-height: 70rpx;
            }

            .center_price {
                font-size: 28rpx;
                height: 100rpx;
                line-height: 100rpx;
                border-top: 1rpx solid #eee;
            }
        }

        .bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;
            padding: 20rpx 60rpx;
            border-radius: 10rpx;
            margin-top: 20rpx;

            .bottom_text {
                font-size: 28rpx;
                color: #333;
            }
        }

        .item-btn {
            width: 90%;
            margin: 100rpx auto 0;
            text-align: center;
            color: #fff;
            padding: 20rpx 0;
            border-radius: 50rpx;
            background: linear-gradient(90deg, #d14838 0%, #ff5b48 100%);
        }
    }
}
</style>
